<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app"> 
    <h1>商品数量：{{count}} 个</h1> 
    <h1>商品单价：{{unitPrice}} 元</h1> 
    <h1>商品总价：{{totalPrice}} 元</h1> 
    <button @click="changePrice">修改单价</button>
    <button @click="changeCount">修改数量</button>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
 var vm = new Vue({
	el: '#app',
  data: {
  	count: 10,
  	unitPrice: 24
  },
  //  计算属性
  computed: {
  	totalPrice() {
        console.log('计算总价-->', this);
  		return this.count * this.unitPrice
  	}
  },
  methods: {
  	changePrice() {
        console.log('修改价格-->', this);
  		// vm.unitPrice = vm.unitPrice + 1
        this.unitPrice = this.unitPrice +1
  	},
  	changeCount() {
  		// vm.count = vm.count + 1
        this.count = this.count + 1
  	}
  }
})
</script>
</html>